<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <ul>
                    <li><img src="src/assets/img/waimai/swiper/ms.jpg"><span>&nbsp&nbsp&nbsp美食</span></li>
                    <li><img src="src/assets/img/waimai/swiper/tdyp.jpg"><span>甜点饮品</span></li>
                    <li><img src="src/assets/img/waimai/swiper/csbl.jpg"><span>超市便利</span></li>
                    <li><img src="src/assets/img/waimai/swiper/scsg.jpg"><span>蔬菜水果</span></li>
                    <li><img src="src/assets/img/waimai/swiper/mtmy.jpg"><span>美团买药</span></li>
                    <li><img src="src/assets/img/waimai/swiper/xwc.jpg"><span>&nbsp&nbsp下午茶</span></li>
                    <li><img src="src/assets/img/waimai/swiper/mtds.jpg"><span>美团电商</span></li>
                    <li><img src="src/assets/img/waimai/swiper/ttsq.jpg"><span>天天神券</span></li>
                    <li><img src="src/assets/img/waimai/swiper/phf.jpg"><span>&nbsp&nbsp拼好饭</span></li>
                    <li><img src="src/assets/img/waimai/swiper/lmxh.jpg"><span>浪漫鲜花</span></li>
                    <li><img src="src/assets/img/waimai/swiper/jtlm.jpg"><span>津贴联盟</span></li>
                    <li><img src="src/assets/img/waimai/swiper/mbdg.jpg"><span>面包蛋糕</span></li>
                    <li><img src="src/assets/img/waimai/swiper/ncgz.jpg"><span>奶茶果汁</span></li>
                    <li><img src="src/assets/img/waimai/swiper/xyst.jpg"><span>校园食堂</span></li>
                    <li><img src="src/assets/img/waimai/swiper/hbps.jpg"><span>汉堡披萨</span></li>
                </ul>
            </div>
            <div class="swiper-slide">
                <ul>
                    <li><img src="src/assets/img/waimai/swiper/mj.jpg"><span>&nbsp&nbsp&nbsp买酒</span></li>
                    <li><img src="src/assets/img/waimai/swiper/xhdg.jpg"><span>鲜花蛋糕</span></li>
                    <li><img src="src/assets/img/waimai/swiper/mfmg.jpg"><span>米粉面馆</span></li>
                    <li><img src="src/assets/img/waimai/swiper/jcc.jpg"><span>&nbsp&nbsp家常菜</span></li>
                    <li><img src="src/assets/img/waimai/swiper/xmct.jpg"><span>小美餐厅</span></li>
                    <li><img src="src/assets/img/waimai/swiper/xcg.jpg"><span>&nbsp&nbsp小吃馆</span></li>
                    <li><img src="src/assets/img/waimai/swiper/bzzp.jpg"><span>包子粥铺</span></li>
                    <li><img src="src/assets/img/waimai/swiper/kfg.jpg"><span>&nbsp&nbsp咖啡馆</span></li>
                    <li><img src="src/assets/img/waimai/swiper/nwtm.jpg"><span>暖胃汤面</span></li>
                    <li><img src="src/assets/img/waimai/swiper/dzqs.jpg"><span>低脂轻食</span></li>
                    <li><img src="src/assets/img/waimai/swiper/jzg.jpg"><span>&nbsp&nbsp饺子馆</span></li>
                    <li><img src="src/assets/img/waimai/swiper/nlsc.jpg"><span>能量西餐</span></li>
                    <li><img src="src/assets/img/waimai/swiper/xsj.jpg"><span>&nbsp&nbsp新商家</span></li>
                    <li><img src="src/assets/img/waimai/swiper/lxsk.jpg"><span>龙虾烧烤</span></li>
                    <li><img src="src/assets/img/waimai/swiper/qb.jpg"><span>&nbsp&nbsp&nbsp全部</span></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import Swiper from "swiper"

    export default {
        name: "SwiperWch",
        mounted() {
            new Swiper(".swiper-container", {
                autoplay: false
            })
        }
    }
</script>

<style scoped>
    @import "/node_modules/swiper/dist/css/swiper.min.css";

    .swiper-container {
        width: 96vw;
        height: 220px;
        margin: 10px auto;
        background-color: white;
        border-radius: 15px;

    }

    ul {
        margin: 0 auto;
        width: 90vw;
        height: 100px;

    }

    li {
        width: 20%;
        height: 33%;
        float: left;
        font-size: 12px;
        margin: 15px auto 15px;
    }

    span {
        display: flex;
        width: 100%;
        text-align: center;
    }

    img {
        margin-left: 8px;
        width: 40px;
        height: 40px;
    }
</style>